<template>
    <view class="emoji-wrap">
		<view class="emoji-tab">
			<text
				:class="index == swiperIndex ? 'emoji-tab-item actived' : 'emoji-tab-item'"
				v-for="(item, index) in emojiTabs" :key="index"
				@click="handleSelectEmojiTab(index)"
			>{{item}}</text>
		</view>
        <swiper
			:current="swiperIndex"
			@change="swiperChange"
			:indicator-active-color="global.THEME_COLOR"
		>
			<swiper-item v-for="(items, index) in emojiList" :key="index">
				<view class="emoji-box">
					<view class="emoji-row">
						<view 
							class="emoji-parent"
							v-for="(item, i) in items" :key="i" hover-class="checkActive"
							hover-stay-time="100"
							@click="tuchEmoj(item)"
						>
							<text class="emoji-conn">{{ item }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
    </view>
</template>

<script lang="ts" setup>
import { inject, reactive, ref } from 'vue'

// 全局属性
const global: any = inject('global')

const emit = defineEmits(['swiperChange'])

// 表情列表
const emojiList = reactive([
	[
		'🤣', '😁', '😀', '😄', '😆', '😅', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '🥲', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '🤨'
	],
	[
		'💩', '🤡', '👹', '👻', '👽', '👾', '🤖', '😈', '☠️', '💀', '🤬', '😡', '😠', '😤', '🥴', '😫', '😩', '🥱', '😱', '🥺', '😧', '😳', '😎', '🤠', '😷', '🤒', '😴', '😪', '🤤', '😔', '😮‍💨', '😏',
	],
	[
		'💌', '💘', '💝', '💖', '💗', '💓', '💞', '💕', '💟', '❣️', '💔', '❤️‍🔥', '❤️‍🩹', '❤️', '🖤', '🤍', '💋', '💯', '💢','💥', '💫', '💦', '🖐️', '🤚', '✋', '💨', '👁️‍🗨️', '💤', '🖖', '🗨️', '💭', '👋',
	],
	[
		'👌', '🤌', '🤏', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👆', '👇', '👉', '🖕', '☝️', '👍', '🤜', '🤛', '👊', '👎','✊', '👏', '🙌', '👐', '🤝', '🙏', '✍️', '💅', '💪', '🦾', '🦿', '🦵', '🦶',
	],
	[
		'👶', '🧒', '👦', '👧', '🧑', '👱', '👨', '👱', '🧔‍♂️', '🧔‍♀️', '👨‍🦳', '🧑‍🦰', '🧓', '👴', '👱‍♂️', '🙍', '🙎‍♂️', '🙍‍♀️', '🙍‍♂️', '🙎‍♀️', '🙆', '🧑‍⚕️', '💁', '🧑‍🎓', '👨‍🏫', '👩‍⚖️', '🧑‍🔧', '🧑‍✈️', '🧑‍🚀', '👨‍🚒', '👮', '🕵️‍♂️'
	],
	[
		'🐵', '🐒', '🦍', '🦧', '🐶', '🐕', '🦮', '🐕‍🦺', '🐱', '🐈', '🐯', '🦁', '🐆', '🐴', '🦓', '🦬', '🐃', '🐮', '🐖', '🐗', '🐐', '🐫', '🐪', '🦙', '🐘', '🐁', '🐿️', '🦔', '🐨', '🐼', '🦡', '🐾',
	],
	[
		'🦃', '🐔', '🐓', '🐣', '🐤', '🐥', '🐦', '🐧', 
		'🕊️', '🐧', '🦆', '🦢', '🦅', '🦉', '🦤', '🪶', 
		'🦩', '🦚', '🦜', '🐸', '🐊', '🐢', '🦎', '🐍', 
		'🐲', '🦕', '🦖', '🐉', '🐳', '🐟', '🐚', '🦈'
	],
	[
		'🐌', '🐞', '🦋', '🐜', '🪲', '🦠', '🪱', '🐝', 
		'💐', '🥀', '🦗', '🪰', '🦂', '🕸️', '🌺', '🕷️', 
		'🌳', '☘️', '🪴', '🌴', '🌲', '🌱', '🌿', '🍁', 
		'🍄', '🍃', '🌾', '🌿', '🌼', '🌵', '🌷', '🏵️'
	],
	[
		'🍇', '🍈', '🍉', '🍊', '🍋', '🍌', '🍍', '🍏', 
		'🍐', '🍑', '🫐', '🍒', '🍓', '🥝', '🫒', '🥑', 
		'🥕', '🍆', '🫑', '🌽', '🌶️', '🥦', '🥬', '🧅', 
		'🧄', '🥜', '🌰', '🍞', '🍞', '🥐', '🥨', '🧀'
	],
	[
		'🍗', '🥩', '🥓', '🍔', '🍕', '🍟', '🌭', '🥪', 
		'🌮', '🫔', '🍳', '🥘', '🍲', '🍿', '🧈', '🧂', 
		'🥫', '🍱', '🍘', '🍚', '🍙', '🍜', '🍛', '🍝', 
		'🍠', '🍤', '🍥', '🍡', '🦀', '🦞', '🦐', '🦑'
	],
	[
		'🍼', '🥛', '☕', '🫖', '🍵', '🍶', '🍾', '🍷', 
		'🍸', '🍹', '🍺', '🍻', '🥂', '🥃', '🥤', '🍽️', 
		'🥄', '🍴', '🥢', '🌍', '🌐', '🏔️', '🗻', '🏕️', 
		'🏝️', '🏟️', '🏛️', '🏗️', '🧱', '🪨', '🪵', '🏚️'
	],
	[
		'🏪', '🏩', '🏫', '🏭', '🏯', '🏰', '🗼', '💒', 
		'⛪', '🕌', '🕍', '🚉', '🚄', '🏍️', '🚍', '🚓', 
		'🚗', '🚖', '🛴', '🚲', '🦽', '🚦', '🚨', '🏎️', 
		'🛑', '🚧', '⚓', '⛵', '🛳️', '⛴️', '🚢', '✈️'
	],
	[
		'🚁', '🪂', '💺', '🚡', '🚀', '🛰️', '🛸', '⌛',
		'☔', '🌈', '⏱️', '⛄', '⌚', '⛱️', '🌂', '⚡',
		'❄️', '💧', '☃️', '🎖️', '✨', '🏐', '🏉', '🏈',
		'🔥', '☄️', '🎉', '🎎', '⚽', '🏀', '⚾', ''
	],
	[
		'🥏', '🎾', '🎳', '🏑', '🥍', '🏸', '🥊', '🏓',
		'🤿', '🎣', '⛸️', '🥅', '🥋', '🛷', '🎽', '🎿',
		'♦️', '👓', '♥️', '🎯', '♣️', '🎮', '🎨', '🧵',
		'🔔', '🔇', '🔊', '🥼', '🥽', '🦺', '🧥', '👔'
	],
	[
		'🎼', '🎵', '🎤', '📻', '🎧', '🎷', '🎺', '🎸',
		'🎻', '📞', '🔋', '💻', '🖥️', '🖨️', '⌨️', '🖱️',
		'💾', '💿', '🎥', '🎬', '📸', '💰', '✉️', '✏️',
		'✒️', '💼', '📅', '📇', '🔒', '🔨', '🪓', '⛏️'
	],
	[
		'🛠️', '🗡️', '🪃', '⚔️', '💣', '🔧', '🪛', '🔩',
		'🗜️', '⚖️', '⚙️', '🧲', '🪝', '🧰', '🪜', '🔭',
		'🔬', '💉', '🩸', '💊', '🩹', '🩺', '🚪', '🛗',
		'🪞', '🪟', '🛏️', '🪠', '🚽', '🪑', '🛁', '🧷'
	],
	[
		'🧯', '🛒', '🚬', '⚰️', '🪦', '⚱️', '🏧', '🚮',
		'♿', '🚹', '🚺', '🚾', '🛃', '🚯', '⚠️', '🚸',
		'⛔', '🚫', '🚭', '🚳', '🚱', '🚷', '📵', '🔞',
		'☢️', '☣️', '🛐', '⚛️', '🕉️', '☪️', '♀️', '♂️'
	],
	[
		'✖️', '➖', '➗', '♾️', '💱', '💲', '♻️', '🔱',
		'🚩', '🔆', '📌', '🖊️', '🖍️', '', '', '',
		'📶', '📳', '💍', '💎', '💄', '⛑️', '🪖', '👢',
		'🪥', '🚬', '🥿', '👡', '👟', '🥾', '👠', '🩴'
	],
	[
		'🧦', '🩲', '👙', '🏆', '🥈', '🥉', '🏅', '🎀',
		'🎁', '🎟️', '🎃', '🎄', '⛈️', '⛅', '🌦️', '🌩️',
		'🛎️', '🧳', '🎠', '🐇', '🐰', '👨‍👩‍👧‍👧', '👨‍❤️‍💋‍👨', '👩‍👩‍👦',
		'🤼', '🤸', '🚴‍♀️', '⛹️‍♀️', '🏋️', '🚵', '🤺', '🏌️'
	]
])

// 表情tab栏
const emojiTabs = reactive([
	'笑脸',
	'搞怪',
	'爱心',
	'手势',
	'人物',
	'动物',
	'鸟类',
	'昆虫',
	'水果',
	'食物',
	'饮品',
	'建筑',
	'交通',
	'运动',
	'办公',
	'工具',
	'标识',
	'衣鞋',
	'综合',
])

// swiper下标
const swiperIndex = ref(0)

// 选中表情
const selectedEmoji = ref('')

const tuchEmoj = (item: string) => {
	selectedEmoji.value = item
	emit('swiperChange', item)
}

// swiper 改变
const swiperChange = (e: any) => {
	swiperIndex.value = e.detail.current
}

const handleSelectEmojiTab = (index: number) => {
	swiperIndex.value = index
}
</script>

<style scoped lang="scss">
.emoji-wrap {
    margin-right: 10rpx;
    margin-left: 20rpx;
    height: 580rpx;
	.emoji-tab {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0;
		.emoji-tab-item {
			padding: 10rpx;
			font-weight: bold;
			color: #b5b3b3;
		}
		.actived {
			color: $uni-color-primary;
		}
	}
	.emoji-box {
		display: flex;
		flex-direction: column;
		.emoji-row {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.emoji-parent {
				margin-left: 8rpx;
				margin-bottom: 5rpx;
				align-items: center;
				margin-top: 8rpx;
				padding-top: 5rpx;
				padding-bottom: 5rpx;
				.emoji-conn {
					width: 80rpx;
					font-size: 56rpx;
					text-align: center;
				}
			}
			.checkActive {
				background-color: #e8e8e8 !important;
			}
		}
	}
}
</style>